<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <TCard title="分类商品数量(饼图)">
          <pie-echart :pieData="categoryGoodsCount"></pie-echart>
        </TCard>
      </el-col>
      <el-col :span="10">
        <TCard title="不同城市商品销量(饼图)">
          <RingEchart v-bind="categoryGoodsFavor"></RingEchart> </TCard
      ></el-col>
      <el-col :span="7">
        <TCard title="分类商品数量(玫瑰图)">
          <RoseEchart :roseData="categoryGoodsCount"></RoseEchart> </TCard
      ></el-col>
    </el-row>
    <el-row :gutter="10" class="content-row">
      <el-col :span="12">
        <TCard title="分类商品销量">
          <LineEchart v-bind="categoryGoodsSale" title="商品分类"></LineEchart>
        </TCard>
      </el-col>
      <el-col :span="12">
        <TCard title="分类商品收藏">
          <BarEchart v-bind="categoryGoodsFavor"></BarEchart>
        </TCard>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import {
  PieEchart,
  RoseEchart,
  LineEchart,
  BarEchart,
  RingEchart
} from '@/components/page-echatrs'

import TCard from '@/base-ui/card'
import { computed } from '@vue/reactivity'
const store = useStore()
store.dispatch('dashboard/getDashboardDataAction')

const categoryGoodsCount = computed(() => {
  return store.state.dashboard.categoryGoodsCount.map((item: any) => {
    return { name: item.name, value: item.goodsCount }
  })
})

const categoryGoodsSale = computed(() => {
  const xLabels: string[] = []
  const values: any[] = []

  const categoryGoodsSale = store.state.dashboard.categoryGoodsSale
  for (const item of categoryGoodsSale) {
    xLabels.push(item.name)
    values.push(item.goodsCount)
  }
  return { xLabels, values }
})

const categoryGoodsFavor = computed(() => {
  const xLabels: string[] = []
  const values: any[] = []

  const categoryGoodsFavor = store.state.dashboard.categoryGoodsFavor
  for (const item of categoryGoodsFavor) {
    xLabels.push(item.name)
    values.push(item.goodsFavor)
  }
  return { xLabels, values }
})
</script>
<style lang="less" scoped>
.content-row {
  margin-top: 20px;
}
</style>
